<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">            
            <el-form-item label="主机:" prop="host">
                <el-input
                v-model="queryParams.host"
                placeholder="请输入主机信息"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="名称:" prop="name">
                <el-input 
                v-model="queryParams.name"
                placeholder="请输入名称"
                clearable
                size="small"
                @key.enter.native="handleQuery"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表工具lan 新增删除等 -->
        <el-row :gutter="20" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['kong:service:add']"                
                >新增</el-button>
            </el-col>

            <el-col :span="1.5">
                    <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    :loading="exportLoading"
                    @click="handleExport"
                    v-hasPermi="['kong:service:export']"
                >导出</el-button>
            </el-col>

            <right-toolbar :showSearch.sync="showSearch" @queryTable="getKongServiceList"></right-toolbar>

        </el-row>

        <el-table  v-loading="loading" :data="serviceList" >
            <el-table-column label="名称" align="center" prop="name"></el-table-column>
            <el-table-column label="主机" align="center" prop="host"></el-table-column>
            <el-table-column label="请求Url" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.protocol}}://{{scope.row.host}}:{{scope.row.port}}</span>
                </template>
            </el-table-column>
            <el-table-column label="绑定路由">
                <template slot-scope="scope">
                    <el-popover v-for="route in scope.row.kongRoutes" trigger="click" placement="top" :key="route.name">
                        
                        <el-descriptions class="margin-top" :column="4" border>
                            <el-descriptions-item>                                        
                                <template slot="label">
                                    <i class="el-icon-s-open"></i>
                                    路由名:
                                </template>
                                {{route.name}}
                            </el-descriptions-item>
                            
                            <el-descriptions-item>                                        
                                <template slot="label">
                                    <i class="el-icon-s-open"></i>
                                    路由Host:
                                </template>
                                {{route.hosts}}
                            </el-descriptions-item>
                            

                            <el-descriptions-item>                                        
                                <template slot="label">
                                    <i class="el-icon-s-open"></i>
                                    路由Path:
                                </template>
                                {{route.paths}}
                            </el-descriptions-item>

                            <el-descriptions-item>                                        
                                <template slot="label">
                                    <i class="el-icon-s-open"></i>
                                    创建时间:
                                </template>
                                {{dateFormatLong(route.created_at)}}
                            </el-descriptions-item>

                        </el-descriptions>
                        <div slot="reference" class="name-wrapper">
                            <el-button type="text" size="medium">{{route.name}}</el-button>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="id" align="center" prop="id"></el-table-column>
            <el-table-column label="标签" align="center" prop="tags">
                <template slot-scope="scope">
                    <span v-for="tag in scope.row.tags" style="margin-left:8px;" :key="tag">{{tag}}</span>
                </template>
            </el-table-column>
            <el-table-column label="绑定插件">
                <template slot-scope="scope">
                    <el-popover v-for="plugin in scope.row.kongPlugins" trigger="click" placement="top" :key="plugin.name">                     
                        
                        <el-descriptions  class="margin-top" :column="3"  border>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-s-open"></i>
                                    插件名:
                                </template>
                                {{plugin.name}}
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-view"></i>
                                    是否启用:
                                </template>
                                {{plugin.enabled}}
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-news"></i>
                                    创建时间:
                                </template>
                                {{dateFormatLong(plugin.created_at)}}
                            </el-descriptions-item>
                        </el-descriptions>

                        <div slot="reference" class="name-wrapper">
                            <el-button type="text" size="medium">{{plugin.name}}</el-button>
                        </div>                                                
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="created_at" :formatter="dateFormat"></el-table-column>
            
            <el-table-column  label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="small"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['kong:profile:edit']"
                    >编辑</el-button>

                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['kong:profile:remove']"
                    >删除</el-button>

                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-add"
                        @click="handleAddRoute(scope.row)"
                        v-hasPermi="['kong:profile:remove']"
                    >新增路由</el-button>
                    
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-add"
                        @click="handleAddPlugin(scope.row)"
                        v-hasPermi="['kong:profile:remove']"
                    >新增插件</el-button>


                </template>
            </el-table-column>

        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getKongServiceList"
            />

        <!--新增 弹出层  -->
        <el-dialog :title="title" :visible.sync="addOpen" width="860px" append-to-body>
            <add-service @callback="handleCloseAddServiceDiglog"/>
        </el-dialog>

        <!-- 修改弹出层 -->
        <el-dialog title="编辑服务信息" v-if="editOpen" :visible.sync="editOpen" width="900px" append-to-body @close="handleCloseEditService">
            <edit-service :serviceId="editServiceId" :serviceEntity="serviceEntity" @callback="handleCloseAddServiceDiglog" />
        </el-dialog>

        <el-dialog title="新增路由信息" v-if="addRouteOpen" :visible.sync="addRouteOpen" width="900px" append-to-body>
            <add-route :serviceId="editServiceId" @callback="handleAddRouteCallback" />
        </el-dialog>

        <el-dialog title="新增插件" v-if="addPluginOpen" :visible.sync="addPluginOpen" width="900px" append-to-body>
            <plugin-list :service="serviceEntity" @callback="handleAddPluginCallback" />
        </el-dialog>

    </div>
</template>
<script>
import moment from 'moment'
import { kongServiceList ,deleteService} from "@/api/kong/service";
import EditService from "./editService";
import AddService from "./addService";
import AddRoute from "../routes/addRoute";
import PluginList from "../components/pluginList"
export default {
    components: { EditService ,AddService,AddRoute,PluginList},
    props:{  },
    data(){
        return{
            // 总条数
            total: 0,
            // table 加载标识
            loading: false,
            // 搜索显示标识
            showSearch: true,
            // 查询条件
            queryParams:{
                pageNum: 1,
                pageSize: 10,
                //主机
                host:null

            },
            // 服务列表信息
            serviceList:[],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 导出遮罩层
            exportLoading: false,
            // 弹出层 标题
            title:"",
            // 是否显示 新增 弹出层
            addOpen: false,
            // 是否显示 编辑 弹出层
            editOpen: false,
            // 表单参数
            form:{},
            // 表单校验
            rules:{},
            // 修改 服务 id 
            editServiceId:null,
            // 服务实体
            serviceEntity: null,
            // 新增路由
            addRouteOpen: false,
            // 新增插件
            addPluginOpen: false,
            

        }
    },
    created(){
        this.getKongServiceList();
    },
    mounted(){

    },
    computed: {
        
    },
    methods:{
        // 获取服务列表
        getKongServiceList(){
            kongServiceList(this.queryParams).then(res=>{
                // console.log(JSON.stringify(res));
                if(!res.rows){
                    return;
                }
                this.serviceList=res.rows;
                this.total=res.total
            }).catch(err =>{

            });
        },
        // 处理查询请求
        handleQuery(){

        },
        // 处理新增操作
        handleAdd(){
            this.addOpen = true;
            this.title = "新增服务信息";

        },
        // 处理 更新
        handleUpdate(row){
            if(!row.tags){
                row.tags=[]
            }
            this.editServiceId=row.id;
            this.serviceEntity=row;
            console.log("跳转到服务编辑页："+this.editServiceId)
            this.editOpen=true;
        },
        // 处理删除
        handleDelete(row){
            let serviceId=row.id;
            // console.log(serviceId);          
            this.$confirm('是否确认删除服务编号为："' + serviceId + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function() {
                    return  deleteService(serviceId);
            }).then(() => {
                this.getKongServiceList();
                this.msgSuccess("删除成功");
            }).catch(() => {});           
        },
        // 处理导出 
        handleExport(){},

        // 表单提交
        submitForm(){

        },

        // 表单取消
        cancel(){
            // 关闭弹出层
            this.open=false
        },

        // 关闭 新增弹出层 函数
        handleCloseAddServiceDiglog(payload){
            this.addOpen=false;
            this.editOpen=false;
            this.msgSuccess(payload);
            // 刷新列表
            this.getKongServiceList();
        },

        handleCloseEditService(){
            this.getKongServiceList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        //时间处理函数
        dateFormat(row, column){
            const _date = row[column.property]*1000; 
            if(_date ==undefined){return ''};
            return moment(_date).format("YYYY-MM-DD HH:mm:ss");
        },
        dateFormatLong(_date){
            if(_date ==undefined){return ''};
            return moment(_date*1000).format("YYYY-MM-DD HH:mm:ss");
        },
        handleAddRoute(row){
            // this.msgSuccess("handleAddRoute")
            this.editServiceId=row.id;
            this.addRouteOpen=true;

        },
        handleAddRouteCallback(payload){
             this.addRouteOpen=false;
             this.getKongServiceList();
        },
        handleAddPlugin(row){
            // this.msgSuccess("handleAddPlugin")
            this.serviceEntity=row;
            this.addPluginOpen=true;
        },
        handleAddPluginCallback(payload){
            this.addPluginOpen=false;
             this.getKongServiceList();
        },

    },
    
}
</script>
<style lang="scss" scoped>

</style>